<template>
	<div>
		<div class="left noScroll" v-if="!guidepostVisible">
			<NewSection imgType="car_jiankong" :type="1" title="车辆监控" @onClickRightIcon="onClickRightIcon">
				<!-- 2021年6月17日暂时去掉NewSection的属性rightIcon -->
				<div class="left-person">
					<div class="left-person-item">
						<i-circle :percent="cljk_online_rate" :size="70" :trail-width="10" trail-color="#272c2f"
							:stroke-width="10" stroke-color="#00BAFF">
							<Icon custom="i-icon icon-zaixian2" size="24" color="#fff" />
						</i-circle>
						<div class="flex-1 m-l-25">
							<p class="fs-16 flex a-center j-between">
								<span>在线情况</span>
							</p>
							<div class="flex fs-16">
								<p class="flex-1">
									<span class="">{{cljk_online_rate}}</span>%
								</p>
							</div>
						</div>
						<p class="flex-1 fs-20">
							<span class="">{{cljk_online}}</span>/<span class="">{{cljk_total}}</span>
						</p>
						<Icon custom="i-icon icon-jiantou2" size="18" class="cursor-pointer"
							@click.stop="onClickGenItem(0)" />
					</div>
					<div class="left-person-item">
						<i-circle :percent="cljk_chuqin_rate" :size="70" :trail-width="10" trail-color="#272c2f"
							:stroke-width="10" stroke-color="#00BAFF">
							<Icon custom="i-icon icon-kaoheguanli" size="24" color="#fff" />
						</i-circle>
						<div class="flex-1 m-l-25">
							<p class="fs-16 flex a-center j-between">
								<span>出勤情况</span>
							</p>
							<div class="flex fs-16">
								<p class="flex-1">
									<span class="">{{cljk_chuqin_rate}}</span>%
								</p>
							</div>
						</div>
						<p class="flex-1 fs-20">
							<span class="">{{cljk_chuqin}}</span>/<span class="">{{cljk_total}}</span>
						</p>
						<Icon custom="i-icon icon-jiantou2" size="18" class="cursor-pointer"
							@click.stop="onClickGenItem(1)" />
					</div>
				</div>
			</NewSection>
			<MainSection icon="icon-danwei" title="单位情况" v-if="false">
				<div class="left-company">
					<div class="left-company-list">
						<div class="noData">
							<img src="../../../../assets/main/blank_black.png" style="cursor: default;">
							<p>暂无数据</p>
						</div>
					</div>
				</div>
			</MainSection>
			<NewSection imgType="text" :type="1" title="作业资源">
				<div class="right-resource">
					<div class="right-resource-top">
						<div class="flex a-center" style="flex: 2;">
							<Icon custom="i-icon icon-xianlu2" size="32" class="m-r-20" />
							<div>
								<p>路牌总数</p> <span class="">{{zyzy_route}}</span>
							</div>
						</div>
						<div class="line"></div>
						<div style="flex: 1;">
							<p>主干道</p>
							<span class="">{{zyzy_ok}}</span>
						</div>
						<div style="flex: 1;">
							<p>次干道</p>
							<span style="color: rgb(248, 181, 81);">{{zyzy_ng}}</span>
						</div>
						<Icon custom="i-icon icon-jiantou2" size="18" class="right-resource-top-detailicon"
							@click="onClickShowGuidepost" />
					</div>
					<div class="right-resource-line"></div>
					<div class="right-resource-bottom">
						<div class="right-resource-bottom-item">
							<Icon custom="i-icon icon-zhuanyunche1" size="40" class="right-resource-bottom-icon" />
							<div>
								<p>车辆</p>
								<span class="">{{zyzy_car}}</span>
							</div>
						</div>
						<div class="right-resource-bottom-item">
							<Icon custom="i-icon icon-jiashiyuan1" size="40" class="right-resource-bottom-icon" />
							<div>
								<p>人员</p>
								<span class="">{{zyzy_person}}</span>
							</div>
						</div>
					</div>
				</div>
			</NewSection>
		</div>
		<Modal v-model="genDetailVisible" :mask="false" footer-hide :closable="false" :z-index="600" width="392"
			:styles="{left:'420px',margin:'0',top:'80px'}" @on-visible-change="onChangeGenDetailVisible"
			v-click-outside="handlerCloseGenDetail">
			<div class="left-top-detail">
				<!-- 车辆 -->
				<div class="left-top-car">
					<header>
						<div class="left-top-detail-name">
							{{currentGenListIndex == 0 ? '在线情况' : '出勤情况'}}
						</div>
						<Icon custom="i-icon ivu-icon-ios-close" size="40" class="cursor-pointer"
							@click="genDetailVisible = false" />
					</header>
					<section>
						<div class="">
							<span class="fs-16">{{currentGenListIndex===0?'总在线：':'总出勤：'}}</span>
							<span class="fs-20 text-white">{{currentGenListIndex == 0 ? cljk_online : cljk_chuqin}}
								/
								{{cljk_total}}</span>
						</div>
						<div class="left-top-car-list">
							<template v-for="(item,index) in carArr">
								<div class="left-top-car-item cursor-pointer" :key="index"
									@click.stop="onClickGenDetailItem('车辆',item.type,3)" v-if="item.num != 0">
									<img :src="carImg[item.icon]">
									{{item.type}}
									<span
										class="fs-16 m-l-8">{{currentGenListIndex==0?item.onlinum:item.chuqinnum}}</span>
									<span class="fs-16">/{{item.num}}</span>
								</div>
							</template>
						</div>
					</section>
					<div class="left-top-detail-footer">

					</div>
				</div>
			</div>
		</Modal>
		<div class="right noScroll">
			<NewSection imgType="newCar" :type="3" title="作业实况" rightIcon @onClickRightIcon="onClickWork">
				<div class="right-work">
					<div class="right-work-top">
						<div class="flex a-center">
							<Icon custom="i-icon icon-jinrijihua" size="45" class="m-r-15" />
							<div>
								<p>当前计划</p>
								<span>{{workScene.total || 0}}</span>
							</div>
						</div>
						<div class="line"></div>
						<div>
							<p>已完成</p>
							<span>{{workScene.finished || 0}}</span>
						</div>
						<div>
							<p>作业中</p>
							<span>{{workScene.working || 0}}</span>
						</div>
						<div>
							<p>未完成</p>
							<span style="color: rgb(233, 111, 25);">{{workScene.noFinish || 0}}</span>
						</div>
					</div>
					<div class="right-line">
						<img src="../../../../assets/new/new_line.png">
					</div>
					<div class="right-work-bottom">
						<div class="right-work-bottom-item">
							<div class="fs-16 flex a-center j-between">
								清扫作业
								<span
									class="fs-20 fw-700">{{ workScene.qszyFinishRate ? workScene.qszyFinishRate : 0 }}%</span>
							</div>
							<Progress :percent="workScene.qszyFinishRate?workScene.qszyFinishRate:0" hide-info
								:stroke-color="['#339bc1','#318dc1']" :stroke-width="14" />
						</div>
						<div class="right-work-bottom-item">
							<div class="fs-16 flex a-center j-between">
								洒水作业
								<span
									class="fs-20 fw-700">{{ workScene.sszyFinishRate ? workScene.sszyFinishRate : 0 }}%</span>
							</div>
							<Progress :percent="workScene.sszyFinishRate?workScene.sszyFinishRate:0" hide-info
								:stroke-color="['#339bc1','#318dc1']" :stroke-width="14" />
						</div>
					</div>
				</div>
			</NewSection>
			<!-- 2021年6月17日暂时隐藏 -->
			<MainSection icon="icon-zoushi2" title="作业走势" v-if="false">
				<div class="right-trend">
					<div class="right-trend-top">
						<Select v-model="trend" style="width:120px">
							<Option v-for="item in trendArr" :value="item.id" :key="item.id">{{ item.name }}</Option>
						</Select>
						<div>
							日均：
							<span>239.43 (km)</span>
						</div>
					</div>
					<Echarts height="240px" :options="trendOptions"></Echarts>
				</div>
			</MainSection>
		</div>

		<!-- 左 车辆监控图标 -->
		<Modal v-model="carCaseVisible" title="车辆情况" width="400" footer-hide :mask="false"
			:styles="{left:'8px',top:'80px',margin:'0'}">
			<Tabs :animated="false">
				<TabPane v-for="(item,index) in carCaseList" :key="index" :label="item.title">
					<MainSearchTabs :data="item.list" :treeData="carTreeArr" :tree="carTreeValue"
						:searchVisible="searchCarVisible" @onClickTabItem="onClickCarCaseTab"
						@onClickInputIcon="onClickCarInputIcon" @onClickDeleteInput="onClickCarDeleteInput">
					</MainSearchTabs>
				</TabPane>
			</Tabs>
			<div class="car-case-list">
				<div class="noData">
					<img src="../../../../assets/main/blank_black.png" style="cursor: default;">
					<p>暂无数据</p>
				</div>
			</div>
		</Modal>

		<!-- 作业实况 -->
		<div v-if="sceneListVisible" class="modal-detail">
			<div class="modal-detail-top cursor-pointer" @click.stop="sceneListVisible=false">
				<img src="../../../../assets/new/new_img_back.png">
				作业实况
			</div>
			<div class="right-worklist">
				<div class="right-work-bottom">
					<div class="right-work-bottom-search">
						<Icon type="ios-search" size="24" color="#fff" />
						<Input v-model="workSceneSearchValue" placeholder="" :border="false" clearable
							style="margin-left: 5px;" />
					</div>
					<div class="right-work-switch flex j-end">
						<span>全部</span>
						<i-switch v-model="workSceneSearchSwitch" />
						<span>参与工作</span>
					</div>
					<div class="right-work-line">
						<img src="../../../../assets/new/new_img_line.png">
					</div>
					<!-- 单选框样式暂时隐藏 -->
					<!-- <div class="flex j-end fs-16 m-b-10"
               style="color:#fff">
            <RadioGroup v-model="workSceneSearchRadio">
              <Radio label="all">
                <span>全部</span>
              </Radio>
              <Radio label="work">
                <span>参与工作</span>
              </Radio>
            </RadioGroup>
          </div> -->
					<div class="right-work-bottom-list">
						<div class="right-work-bottom-item fs-15" v-for="(item, index) in workSceneList" :key="index"
							v-show="filterWorkSceneList(item)">
							<div class="flex a-center j-between">
								<div class="line1" style="max-width:180px">
									【{{item.rptCarWork.carWorkType===1?'机动作业':'固定作业'}}】{{item.rptCarWork.planName}}
								</div>
								<div class="flex a-center">
									{{item.rptCarWork.workTypeName}}
									<Icon custom="i-icon icon-jiantou2" size="18" class="cursor-pointer m-l-5"
										@click="onClickWorkList(item)" />
								</div>
							</div>
							<div class="flex j-between fs-15 m-t-10">
								<div>
									{{item.rptCarWork.shiftName}}({{item.workKaoqin.sbsj}}~{{item.workKaoqin.xbsj}})
								</div>
								<div class="flex a-center">
									<span class="m-r-10">完成度:{{ item.rate }}%</span>
								</div>
							</div>
							<Progress :percent="item.rate" hide-info :stroke-color="['#339bc1','#318dc1']" />
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- 作业实况详情 -->
		<div v-if="sceneDetailVisible" class="modal-detail">
			<div class="modal-detail-top cursor-pointer" @click.stop="onClickSceneDetailClose">
				<img src="../../../../assets/new/new_img_back.png">
				作业详情
			</div>
			<div class="case-detail-cont noScroll">
				<div class="case-detail-cont-msg">
					<div class="case-detail-cont-msg-msg">
						<div class="flex j-between w-full m-b-10">
							{{ sceneDetail.planName }}【{{ sceneDetail.carWorkType === 1 ? '机动作业' : '固定作业' }}】
							<p class="min-w-80 text-right">{{ sceneDetail.workTypeName }}</p>
						</div>
						<div>
							{{ sceneDetail.groupName }}：{{ sceneDetail.shiftName }}【{{ sceneDetail.sbsj }}~{{ sceneDetail.xbsj }}】
						</div>
					</div>
					<!-- <div class="case-detail-cont-msg-type">
            {{sceneDetail.type}}
          </div> -->
				</div>
				<div class="case-detail-cont-list">
					<div class="list-item" v-for="(item, index) in sceneDetail.workPlanCars" :key='index'>
						<div class="list-item-line">
							<img src="../../../../assets/new/new_img_line.png">
						</div>
						<div class="flex a-center j-between title">
							<p class="title-left cursor-pointer" style="flex: 1.5;"
								@click.stop="onClickWorkDetail(item)">
								<img src="../../../../assets/new/new_car_work_detail1.png" class="list-item-car">
								<span>{{item.carName}}</span>
							</p>
							<p class="title-right">
								{{item.employeeName}}
							</p>
							<img src="../../../../assets/new/new_car_work_detail2.png"
								class="list-item-img cursor-pointer" @click.stop="onClickTrack(item)">
						</div>
						<ul class="cont">
							<li class="flex a-center j-between">
								<p>{{ item.gridName }}</p>
								<p>遍数:{{ item.finishTangci ? item.finishTangci : 0 }}/{{ item.tangCi || 0 }}</p>
							</li>
							<!-- <li class="flex a-center">
                <p>路段名称:东风东街1</p>
                <p>遍数:2/5</p>
              </li> -->
						</ul>
					</div>
				</div>
			</div>
		</div>

		<!-- 作业路段 0605新-->
		<div v-show="guidepostVisible" class="section-right">
			<div class="section-right-top">
				<Icon custom="i-icon icon-zuojiantou" size="20" class="section-right-icon cursor-pointer"
					@click.stop="onClickCloseGuidepost" />
				作业路段
			</div>
			<div class="section-cont">
				<div class="tabs">
					<div v-for="(item,index) in roadAttributeArr" :key="item.levelId"
						:class="{current : currentGuidepostTabIndex==index}"
						@click.stop="onClickGuidepostTabItem(item, index)">
						{{item.name}}
					</div>
				</div>
				<Input v-model="guidepostSearchValue" placeholder="" clearable />
				<ul class="section-list noScroll">
					<template v-for="(item, index) in guidepostList">
						<li class="list-item" :key="index" v-show="filterGuidepostList(item)">
							<div class="list-item-div">
								<p class="list-item-title">【{{item.levelName}}】<span>{{item.gridName}}</span></p>
								<p class="list-item-cont">路段：{{item.childs.length}}</p>
							</div>
							<Icon custom="i-icon icon-jiantou2" v-if="item.childs.length > 0" size="20" color="#ffffff"
								class="cursor-pointer list-item-icon" @click="onClickGuidepostItem(item,true)" />
						</li>
					</template>
				</ul>
			</div>
		</div>

		<!-- 路牌详情 0605新 -->
		<div v-show="guidepostDetailVisible" class="section-right">
			<div class="section-right-top">
				<Icon custom="i-icon icon-zuojiantou" size="20" class="section-right-icon cursor-pointer"
					@click.stop="onClickCloseGuidepostDetail" />
				路牌详情
			</div>
			<div class="guidepost noScroll">
				<div class="guidepost-cont">
					<ul class="guidepost-list">
						<li class="list-item" v-for="(item,index) in guidepostDetailList" :key="index">
							<div class="list-item-title list-item-lx flex j-between a-center">
								<p class="list-item-lx-p">【{{item.levelName}}】<span>{{item.gridName}}</span></p>
								<!-- 有数据才会显示icon -->
								<Icon custom="i-icon icon-jiantou2" size="20" color="#ffffff"
									class="cursor-pointer list-item-icon"
									@click.stop="onClickGuidepostDetailIcon(item,index)"
									:class="{'icon-current' : item.visible}"
									v-if="(item.depts && item.depts.length>0) || (item.cars && item.cars.length>0)" />
							</div>
							<div class="list-item-cont" v-show="item.visible">
								<div class="list-item-cont-msg flex">
									<p>作业面积：{{item.area || '- - '}}m²</p>
									<p>路段里程：{{item.km || '- - '}}m</p>
								</div>
								<div class="list-item-cont-resource">
									相关资源
								</div>
								<ul class="cont-list">
									<li class="cont-list-item" v-if="item.cars && item.cars.length > 0">
										<div class="cont-list-item-title">车辆</div>
										<ul class="car-list">
											<li class="car-list-item flex a-center cursor-pointer"
												v-for="(items,indexs) in item.cars" :key="indexs"
												@click.stop="onClickBulletinDetail('car',items)">
												<img :src="items.status==0?carNot:items.status==2?carIng:carOk">
												<div class="car-list-item-cont">
													<p>{{items.carName}} {{items.driverName}}</p>
													<!-- <span>{{items.carTypeName}}</span> -->
													<span
														v-if="items.mileage && items.mileage != 0">行驶里程：{{items.mileage}}KM</span>
												</div>
											</li>
										</ul>
									</li>
									<li class="cont-list-item" v-if="item.depts && item.depts.length > 0">
										<div class="cont-list-item-title">人员</div>
										<div v-for="(items,indexs) in item.depts" :key="indexs">
											<div class="person-list-title flex j-between a-center">
												<p>{{items.depName}}</p>
												<p>小队长：{{items.leaderName}}({{items.leaderPhone}})</p>
											</div>
											<ul class="person-list">
												<li class="person-list-item flex a-center cursor-pointer"
													v-for="(itemss,indexss) in items.persons" :key="indexss"
													@click.stop="onClickBulletinDetail('person',itemss)"
													:title="itemss.personPhoto">
													<img :src="itemss.status==0?populeNot:itemss.status==2?populeIng:populeOk" >
													<div class="person-list-item-cont">
														<p>{{itemss.personName}}</p>
														<!-- <span>{{itemss.personTypeName}}</span> -->
														<span
															v-if="items.mileage && items.mileage != 0">行驶里程：{{items.mileage}}KM</span>
													</div>
												</li>
											</ul>
										</div>
									</li>
								</ul>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</template>


<script>
	import {
		mapActions,
		mapGetters
	} from 'vuex';
	import bus from '@/utils/bus'
	import {
		getToday
	} from '@/utils/dateRangUtil'
	import MainSection from '../template/MainSection';
	import MainSearchTabs from '../template/MainSearchTabs';
	import MainMachineWorkList from '../template/MainMachineWorkList';
	import Echarts from '../../../common/Echarts';
	import vClickOutside from 'v-click-outside'
	import NewSection from '../subject/NewSection';
	export default {
		components: {
			MainSection,
			MainSearchTabs,
			MainMachineWorkList,
			Echarts,
			NewSection
		},
		directives: {
			clickOutside: vClickOutside.directive
		},
		data() {
			return {
				carImg: {
					'icon-sashuiche': require('../../../../assets/new/new_car_1.png'),
					'icon-beiche': require('../../../../assets/new/new_car_2.png'),
					'icon-zhuanyunche': require('../../../../assets/new/new_car_3.png'),
					'icon-beiche': require('../../../../assets/new/new_car_1.png'),
					'icon-xifenche': require('../../../../assets/new/new_car_5.png'),
					'icon-penwuche': require('../../../../assets/new/new_car_6.png'),
					'icon-xisaoche': require('../../../../assets/new/new_car_7.png'),
					'icon-zhuanyunche': require('../../../../assets/new/new_car_8.png')
				},
				today_date: '',
				workScene: {},
				workSceneList: [],
				cljk_chuqin: 0,
				cljk_chuqin_rate: 0,
				cljk_online: 0,
				cljk_online_rate: 0,
				cljk_total: 0,
				carTypeArr: [],

				zyzy_car: 0,
				zyzy_ng: 0,
				zyzy_ok: 0,
				zyzy_person: 0,
				zyzy_route: 0,

				trend: 1,
				trendArr: [{
						id: 1,
						name: '里程'
					},
					{
						id: 2,
						name: '油耗'
					},
					{
						id: 3,
						name: '违规'
					}
				],
				trendOptions: {
					xAxis: {
						type: 'category',
						axisLabel: {
							rotate: 30,
						},
						data: ['05/07', '05/08', '05/09', '05/10', '05/11', '05/12', '05/13']
					},
					yAxis: {
						type: 'value',
						splitLine: {
							show: false
						}
					},
					tooltip: {
						trigger: 'axis'
					},
					series: [{
						type: 'line',
						symbol: 'none',
						smooth: true,
						data: [427, 156, 212, 205, 270, 210, 196],
					}],
					color: ['#25bb96'],
					textStyle: {
						color: '#fff'
					}
				},
				carCaseVisible: false,
				carCaseList: [{
					title: '实时作业',
					list: [{
						title: '全部',
						count: 0
					}, {
						title: '作业中',
						count: 0
					}, {
						title: '超时未到',
						count: 0
					}, {
						title: '空驶',
						count: 0
					}, ]
				}, {
					title: '当日情况',
					list: [{
						title: '全部',
						count: 10
					}, {
						title: '正常',
						count: 4
					}, {
						title: '晚到',
						count: 0
					}, {
						title: '离岗',
						count: 0
					}]
				}],
				carTreeValue: '',
				searchCarVisible: false,
				sceneListVisible: false,
				sceneDetailVisible: false,
				sceneDetail: {
					workPlanCars: []
				},
				genDetailVisible: false,
				currentGenListIndex: '',
				carArr: [],
				// 作业实况列表
				workSceneSearchValue: '',
				workSceneSearchSwitch: false,
				workSceneSearchRadio: 'all',
				// 作业资源 作业路段弹框
				guidepostVisible: false,
				currentGuidepostTabIndex: 0,
				guidepostSearchValue: '',
				guidepostList: [],
				// 作业资源 路牌详情弹框
				guidepostDetailVisible: false,
				guidepostDetailList: [],
				guideList:[],
				firstType:false,
				firstObj:null,
				populeNot:require('../../../../assets/new/popule_not.png'),
				populeIng:require('../../../../assets/new/popule_ing.png'),
				populeOk:require('../../../../assets/new/popule_ok.png'),
				carNot:require('../../../../assets/new/car_not.png'),
				carIng:require('../../../../assets/new/car_ing.png'),
				carOk:require('../../../../assets/new/car_ok.png'),
        lTime: new Date().getTime(),// 最后一次点击的时间
        cTime: new Date().getTime(),//当前时间
        timer: null,
			};
		},
		watch: {
			guidepostVisible(newVal) {
				if (!newVal) {
					this.currentGuidepostTabIndex = 0
					this.guidepostList = []
					bus.$emit('drawGuidepost', [])
					bus.$emit('redrawMarker')
				}
			},
			sceneDetailVisible(newVal) {
				if (!newVal) {
					bus.$emit('drawGrid', [])
					bus.$emit('redrawMarker')
				}
			},
      genDetailVisible(newVal){
        if (newVal) {
          this.timer = setInterval(() => {
            this.cTime = new Date().getTime();
            if ((this.cTime - this.lTime) > 15000) {
              this.genDetailVisible = false
            }
          }, 1000);
        } else {
          clearInterval(this.timer)
        }
      }
		},
		computed: {
			...mapGetters({
				'carTreeArr': 'getCarTreeList',
			}),
			roadAttributeArr() {
				let arr = [{
					levelId: '',
					name: '全部'
				}]
				return arr.concat(this.$store.getters.getRoadAttributeAllList)
			},
		},
		mounted() {
			this.init()
		},
		destroyed() {
			// 重置地图点
			bus.$emit('drawGuidepost', [])
			bus.$emit('drawGrid', [])
			bus.$emit('redrawMarker')
		},
		methods: {
			...mapActions([
				'updateCarTreeList',
				'updateRoadAttributeAllList'
			]),
			getSortList(arr) {
				let newArr = arr.sort(function(a, b) {
					return b.finishTangci - a.finishTangci
				})
				return newArr
			},
			init() {
				this.updateCarTreeList()
				this.updateRoadAttributeAllList()
				this.today_date = getToday();
        bus.$on('onMouseDownPage', data => {
          this.lTime = data
        })
				this.$http.getMapCarState().then((res) => {
					if (res.code === 200) {
						let data = res.result;
						this.cljk_chuqin = data.chuQinCount;
						this.cljk_chuqin_rate = data.chuQinRate;
						this.cljk_online = data.onlineCount;
						this.cljk_online_rate = data.onlineRate;
						this.cljk_total = data.total;
						this.carTypeArr = data.carResults;
					}
				})
				this.$http.getMapCarWorkScene({
					date: this.today_date
				}).then((res) => {
					if (res.code === 200) {
						this.workScene = res.result
						this.workScene.noFinish = this.workScene.total - this.workScene.finished - this.workScene
							.working
					}
				})
				// 作业资源
				this.$http.getMapWorkResource().then((res) => {
					if (res.code === 200) {
						let data = res.result;
						this.zyzy_car = data.carNumber ? data.carNumber : 0
						this.zyzy_person = data.empNumber ? data.empNumber : 0
						this.zyzy_route = data.guideBoardNumber || 0
						this.zyzy_ok = data.mainRoadNumber || 0
						this.zyzy_ng = data.secondaryMainRoadNumber || 0
						// guideBoardNumber 路牌
						// mainRoadNumber 主干道
						// secondaryMainRoadNumber 次干道
					}
				})
				bus.$on('onClickGuidepostItem', this.onClickGuidepostItem)
			},
			// 作业实况列表点击
			onClickWorkList(item) {
				this.sceneDetailVisible = true
				this.sceneDetail = {
					planName: item.rptCarWork.planName,
					carWorkType: item.rptCarWork.carWorkType,
					workTypeName: item.rptCarWork.workTypeName,
					groupName: item.rptCarWork.groupName,
					shiftName: item.rptCarWork.shiftName,
					sbsj: item.rptCarWork.planStartTime.split(' ')[1],
					xbsj: item.rptCarWork.planEndTime.split(' ')[1],
					workPlanCars: this.getSortList(item.jxzyWorkDetaiFilter)
				}
				if (item && item.rptCarWork.lnglat) {
					bus.$emit('drawGrid', [item])
				}
			},
			// 作业实况详情关闭
			onClickSceneDetailClose() {
				this.sceneDetailVisible = false
			},
			// 车辆监控 右侧图标
			onClickRightIcon() {
				this.carCaseVisible = true
			},
			// 组件 车辆情况 类型 点击
			onClickCarCaseTab(item) {
				// console.log(item,'父组件');
			},
			// 组件 车辆情况 输入框 图标 点击
			onClickCarInputIcon() {
				this.searchCarVisible = true
			},
			// 组件 车辆情况 输入框 清空 点击
			onClickCarDeleteInput() {
				this.searchCarVisible = false
			},
			// 点击查看更多作业实况
			onClickWork() {
				this.sceneListVisible = true
				this.$http.getMapCarWorkSceneList({
					date: this.today_date
				}).then((res) => {
					if (res.code === 200) {
						this.workSceneList = res.result;
					}
				})
			},
			onClickTrack(item) {
				const {
					href
				} = this.$router.resolve({
					name: 'newTrack',
					query: {
						type: 'car',
						id: item.carId,
						carType: item.carType,
						name: item.carName
					}
				})
				window.open(href, '_blank')
			},
			// 作业实况详情页 点击车辆跳转到详情页
			onClickWorkDetail(item) {
				bus.$emit('showMainSearchCarDetail', {
					id: item.carId,
					title: item.carName
				})
			},
			// 过滤作业实况列表页
			filterWorkSceneList(item) {
				let searchBoo = true
				let switchBoo = true
				if (this.workSceneSearchValue) {
					searchBoo = item.rptCarWork.planName.indexOf(this.workSceneSearchValue) !== -1
				}
				if (this.workSceneSearchSwitch) {
					switchBoo = item.rate != 0
				}
				// 单选框样式暂时隐藏
				// if (this.workSceneSearchRadio == 'work') {
				//   switchBoo = item.rate != 0
				// }
				return searchBoo && switchBoo
			},
			// 路牌详情 点击车或人跳转到详情页
			onClickBulletinDetail(type, item) {
				if (type == 'car') {
					bus.$emit('showMainSearchCarDetail', {
						id: item.carId,
						title: item.carName
					})
				} else {
					bus.$emit('showMainSearchPersonDetail', {
						id: item.personId,
						title: item.personName
					})
				}
			},
			// 点击 在线情况 出勤情况
			onClickGenItem(index) {
				this.currentGenListIndex = index
				this.genDetailVisible = true
				this.carArr = this.carTypeArr
				bus.$emit('hideSearch')
				bus.$emit('hideMapInfoWindow')
				bus.$emit('hideNavbar')
			},
			// 在线情况 出勤情况弹框关闭时触发
			onChangeGenDetailVisible(boo) {
				// !boo && (this.currentGenListIndex = '')
			},
			onClickGenDetailItem(title, type, status) {
				bus.$emit('onSearchMenuType', {
					title,
					type,
					status
				})
			},
			// 作业资源 点击显示作业路牌
			onClickShowGuidepost() {
				this.guidepostVisible = true
				this.getMapGuidepostList('')
			},
			// 作业资源 获取路牌列表
			getMapGuidepostList(levelId,type=true) {
				this.$http.getMapGuidepostList({
					levelId: levelId
				}).then((res) => {
					if (res.code === 200) {
						if(type){
							this.guideList = res.result
						}
						this.guidepostList = res.result;
						bus.$emit('drawGuidepost', this.guidepostList)
					}
				})
			},
			// 作业资源 点击作业路段tabs
			onClickGuidepostTabItem(item, index) {
				this.currentGuidepostTabIndex = index
				this.getMapGuidepostList(item.levelId,false)
			},
			// 过滤作业路段是否显示
			filterGuidepostList(item) {
				let searchBoo = true
				if (this.guidepostSearchValue) {
					searchBoo = item.gridName.indexOf(this.guidepostSearchValue) !== -1
				}
				return searchBoo
			},
			// 作业资源 点击关闭作业路牌
			onClickCloseGuidepost() {
				this.guidepostVisible = false
			},
			// 作业资源 点击作业路段item
			onClickGuidepostItem(item,type) {
				if(item&&item.levelName=='主干道 '&&type){
					this.firstObj = item
				}else if(type){
					this.firstObj = null
				}
				if(item&&item.levelName=='主干道 '||type){
					this.firstType = false
				}else{
					this.firstType = true
				}
				let obj = this.guideList.find(items => items.gridId === item.gridId)
				if (obj && obj.childs) {
					this.guidepostDetailList = obj.childs.map(items => {
						if(items.depts.length>0){
							items.depts.forEach(steam=>{
								if(steam.persons.length>0){
									let popNot = []
									let popIng = []
									let popOk = []
									steam.persons.forEach(popItem=>{
										if(popItem.status==1||popItem.status==3){
											popOk.push(popItem)
										}else if(popItem.status==2){
											popIng.push(popItem)
										}else{
											popNot.push(popItem)
										}
									})
									steam.persons = [...popOk,...popIng,...popNot]
								}
							})
						}
						if(items.cars.length>0){
							let carsNot = []
							let carsIng = []
							let carsOk = []
							items.cars.forEach(carItem=>{
								if(carItem.status==1||carItem.status==3){
									carsOk.push(carItem)
								}else if(carItem.status==2){
									carsIng.push(carItem)
								}else{
									carsNot.push(carItem)
								}
							})
							items.cars = [...carsOk,...carsIng,...carsNot]
						}
						items.visible = false;
						return items
					})
					this.guidepostDetailVisible = true
					bus.$emit('drawGuidepost', this.guidepostDetailList.filter(items => items.isGuideboard == 1))
				}
				//  else {
				//   this.guidepostDetailList = []
				// }
			},
			// 作业资源 点击关闭作业路段详情
			onClickCloseGuidepostDetail() {
				if(this.firstType&&this.firstObj){
					this.firstType = false
					this.onClickGuidepostItem(this.firstObj)
				}else{
					this.guidepostDetailVisible = false
					this.guidepostDetailList = []
					bus.$emit('drawGuidepost', this.guidepostList)
				}
			},
			// 作业资源 路牌详情图标点击
			onClickGuidepostDetailIcon(item, index) {
				item.visible = !item.visible
				this.$set(this.guidepostDetailList, index, item)
			},
			// 点击别处关闭左侧要素弹窗
			handlerCloseGenDetail() {
				this.genDetailVisible = false
			}
		},
	}
</script>

<style lang='scss' scoped>
	@import "@/scss/iviewCssReset/progress";
	@import "@/scss/iviewCssReset/select";
	@import "@/scss/iviewCssReset/checkbox";
	@import "@/scss/iviewCssReset/modal";
	@import "@/scss/iviewCssReset/tabs";
	@import "@/scss/iviewCssReset/input";

	.left {
		width: 400px;
		position: fixed;
		top: 80px;
		bottom: 0;
		left: 8px;
		z-index: 500;
		transition: all 0.2s;
		overflow: auto;

		.left-person {
			padding: 0 20px 0 40px;

			.left-person-item {
				font-weight: bold;
				display: flex;
				align-items: center;
				color: #dcdcdc;
				margin-top: 20px;
			}

			.left-company {
				.left-company-list {
					height: 472px;
					overflow-x: auto;
				}
			}
		}

		// 作业资源
		.right-resource {
			padding: 28px 30px 0 36px;

			.right-resource-top {
				display: flex;
				align-items: center;
				color: #eee;

				.right-resource-top-detailicon {
					cursor: pointer;
				}

				p {
					font-size: 16px;
					color: #cccccc;
					font-weight: 500;
				}

				span {
					font-size: 20px;
					font-weight: bold;
				}
			}

			.right-resource-line {
				width: 282px;
				height: 1px;
				background: url(../../../../assets/new/new_line.png) 0 0 no-repeat;
				background-size: 100% 100%;
				margin: 20px 0;
			}

			.right-resource-bottom {
				display: flex;
				align-items: center;

				.right-resource-bottom-item {
					flex: 1;
					display: flex;
					align-items: center;

					.right-resource-bottom-icon {
						border-radius: 50%;
						color: #fff;
						padding: 6px;
						margin-right: 12px;
						border: 1px solid rgba(255, 255, 255, 0.2);
					}

					p {
						color: rgba(255, 255, 255, 0.65);
						font-size: 16px;
					}

					span {
						color: #fff;
						font-size: 20px;
						font-weight: bold;
					}
				}
			}
		}
	}

	.left-top-detail {
		color: #cccccc;

		header {
			width: 372px;
			height: 90px;
			font-size: 16px;
			color: #ffffff;
			background: url(../../../../assets/new/new_img_top.png) 0 0 no-repeat;
			background-size: 100% 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 30px 34px 0 15px;

			.left-top-detail-name {
				width: 160px;
				height: 54px;
				line-height: 54px;
				background-image: url(../../../../assets/new/new_light.png);
				background-size: 100% 100%;
				padding-left: 31px;
				font-weight: bold;
				opacity: 0.9;
			}
		}

		section {
			width: 372px;
			font-size: 16px;
			color: #cccccc;
			font-weight: bold;
			line-height: 1;
			background: url(../../../../assets/new/new_img_center.png) 0 0 no-repeat;
			background-size: cover;
			padding: 20px 36px 0;
			overflow: hidden;

			.left-top-car-list {
				display: flex;
				flex-wrap: wrap;

				.left-top-car-item {
					width: 50%;
					font-size: 14px;
					display: flex;
					align-items: center;
					margin-top: 16px;

					img {
						width: 32px;
						height: 32px;
						margin-right: 10px;
					}

					.left-top-car-icon {
						padding: 4px;
						background: rgba(46, 190, 154, 0.1);
						border-radius: 50%;
						margin-right: 8px;
					}

					span {
						color: #fff;
					}
				}
			}
		}

		.left-top-detail-footer {
			width: 372px;
			height: 70px;
			background: url(../../../../assets/new/new_img_bottom.png) 0 0 no-repeat;
			background-size: 100% 100%;
		}
	}

	.right {
		position: fixed;
		top: 80px;
		bottom: 0;
		right: 8px;
		z-index: 500;
		transition: all 0.2s;
		overflow: auto;

		.right-work {
			.right-work-top {
				display: flex;
				align-items: center;
				justify-content: space-between;
				color: #ffffff;
				padding: 14px 24px 0;

				p {
					font-size: 16px;
					color: #cccccc;
				}

				span {
					font-size: 20px;
					font-weight: bold;
				}
			}

			.right-line {
				display: flex;
				justify-content: center;
				margin: 14px 0;

				img {
					display: inline-block;
					width: 282px;
					height: 1px;
				}
			}

			.right-work-bottom {
				font-size: 14px;
				color: #ffffff;
				font-weight: bold;
				line-height: 1;
				padding: 0 30px;

				.right-work-bottom-item {
					color: rgba(255, 255, 255, 0.8);
					margin-bottom: 15px;

					::v-deep .ivu-progress-inner {
						border-radius: 0;
						background: transparent;
						border: 1px solid rgba(255, 255, 255, 0.1);
						padding: 3px 2px;

						.ivu-progress-bg {
							border-radius: 0;
						}
					}
				}
			}
		}

		.right-trend {
			.right-trend-top {
				display: flex;
				align-items: center;
				justify-content: space-between;
				color: rgba(255, 255, 255, 0.7);

				::v-deep {
					.ivu-select-selection {
						background: rgba(0, 0, 0, 0.1);
						border: 1px solid rgba(0, 0, 0, 0.1);
					}

					.ivu-select-item {
						color: #c5c8ce;
					}

					.ivu-icon {
						color: #1ca482;
						font-size: 16px;
					}

					.ivu-select-selected-value {
						color: #fff;
					}

					.ivu-select-dropdown {
						background: rgba(0, 0, 0, 0.6);
						border: 1px solid rgba(255, 255, 255, 0.15);
					}
				}

				span {
					color: #eee;
					font-size: 24px;
					font-weight: bold;
				}
			}
		}
	}

	.resource {
		width: 400px;
		position: fixed;
		top: 80px;
		bottom: 40px;
		right: 0;
		z-index: 500;
		transition: all 0.2s;
		overflow: auto;
		background: rgba(45, 52, 57, 0.95);
		box-shadow: 0px 0px 8px 0px #25bb96;
		border-radius: 6px;

		.resource-title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 44px;
			line-height: 44px;
			background: #525a60;
			color: #eee;
			border-radius: 6px 6px 0 0;
			padding: 0 16px;
			font-size: 16px;

			.resource-title-left {
				.resource-title-left-icon {
					cursor: pointer;
				}
			}
		}

		.resource-status {
			font-size: 16px;
			display: flex;
			justify-content: space-between;
			padding: 20px;

			.resource-status-item {
				position: relative;
				width: 110px;
				height: 66px;
				background-size: 100% 100%;

				.resource-status-item-title {
					margin: 12px 0 4px 16px;
					color: rgba(255, 255, 255, 0.65);
					line-height: 1;
				}

				.resource-status-item-count {
					color: #fff;
					font-size: 20px;
					font-weight: 500;
					margin-left: 16px;
				}

				.resource-status-item-icon {
					position: absolute;
					bottom: 8px;
					right: 8px;
					color: rgba(50, 154, 177, 0.2);
				}
			}

			.resource-status-item:nth-child(1) {
				background-image: url(../../../../assets/main/lineAllBj.png);
			}

			.resource-status-item:nth-child(2) {
				background-image: url(../../../../assets/main/lineOnBj.png);
			}

			.resource-status-item:nth-child(3) {
				background-image: url(../../../../assets/main/lineOffBj.png);
			}
		}

		.resource-list {
			padding: 20px 0;
			overflow: auto;
			height: 661px;

			.resource-list-item {
				padding: 20px 30px;
				display: flex;
				align-items: center;
				cursor: pointer;

				.resource-list-item-left {
					flex: 1;

					.resource-list-item-left-title {
						display: flex;
						align-items: center;
						margin-bottom: 12px;
						color: #eee;
					}

					.resource-list-item-left-work {
						display: inline-block;
						color: rgba(255, 255, 255, 0.65);
						height: 22px;
						line-height: 22px;
						padding: 0 8px;
						border-radius: 10px;
						background: rgba(248, 181, 81, 0.3);
						margin-right: 6px;
					}
				}

				.resource-list-item-right {
					border-radius: 20px;
					border: 1px solid rgba(255, 255, 255, 0.05);
					padding: 2px;

					div {
						color: #fff;
						background: #b18232;
						border-radius: 20px;
						padding: 2px 10px;
						font-size: 12px;
						box-shadow: 0 0 6px 0px #000000 inset;
					}
				}
			}
		}

		.resource-detail {
			.resource-detail-title {
				height: 42px;
				line-height: 42px;
				padding-left: 12px;
				background: #525a60;
				color: rgba(255, 255, 255, 0.7);
				font-size: 16px;
				border-radius: 6px 6px 0 0;

				.resource-detail-title-icon {
					cursor: pointer;
				}
			}

			.resource-detail-duty {
				padding: 20px;

				.resource-detail-duty-firm {
					color: rgba(255, 255, 255, 0.85);
					margin-bottom: 16px;
				}

				.resource-detail-duty-msg {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding-right: 40px;
					color: rgba(255, 255, 255, 0.85);

					div {
						padding-left: 10px;
						border-left: 1px solid rgba(255, 255, 255, 0.3);

						p:first-child {
							color: rgba(255, 255, 255, 0.65);
						}
					}
				}
			}

			.resource-detail-tab {
				display: flex;
				align-items: center;
				height: 32px;
				background: rgba(247, 247, 247, 0.1);
				padding-left: 20px;

				div {
					color: #fff;
					font-size: 16px;
					margin-right: 30px;
					cursor: pointer;
				}

				.resource-detail-tab-item-in {
					color: #26bb97;
				}
			}

			.resource-detail-left {
				.principal {
					padding: 10px 0 20px 0;
					margin: 0 20px;
					border-bottom: 1px solid rgba(255, 255, 255, 0.2);

					.principal-title {
						margin-bottom: 10px;
						color: #fff;
					}

					.principal-cont {
						display: flex;
						align-items: center;
						justify-content: space-between;
						color: #fff;

						.principal-cont-left {
							display: flex;
							align-items: center;

							img {
								width: 42px;
								height: 42px;
								border-radius: 50%;
								margin-right: 10px;
							}

							.principal-cont-left-left {
								div:nth-child(2) {
									color: rgba(255, 255, 255, 0.65);
								}
							}
						}

						.principal-cont-right {
							margin-left: auto;
							height: 20px;
							line-height: 20px;
							background: rgba(38, 187, 151, 0.5);
							border-radius: 4px;
							padding: 0 6px;
						}
					}
				}

				.car {
					.car-title {
						display: flex;
						align-items: center;
						padding: 8px 0;
						padding-left: 20px;
						color: #6dbce1;

						p {
							width: 2px;
							height: 15px;
							border-radius: 2px;
							background: #6dbce1;
							margin-right: 10px;
						}
					}

					.car-cont {
						padding: 20px;
						padding-bottom: 0;
						display: flex;
						flex-wrap: wrap;

						.car-cont-item {
							display: flex;
							align-items: center;
							color: #fff;
							width: 50%;
							margin-bottom: 20px;

							img {
								width: 42px;
								height: 42px;
								border-radius: 50%;
								margin-right: 10px;
							}
						}
					}
				}
			}

			.resource-detail-right {
				.resource-detail-right-title {
					display: flex;
					align-items: center;
					padding: 8px 0;
					padding-left: 20px;
					color: #6dbce1;

					p {
						width: 2px;
						height: 15px;
						border-radius: 2px;
						background: #6dbce1;
						margin-right: 10px;
					}
				}

				.resource-detail-right-msg {
					display: flex;
					align-items: center;
					justify-content: space-between;
					height: 90px;
					margin: 0 20px;
					padding: 0 16px;
					background-image: url(../../../../assets/main/road_bg3.png);
					background-size: 100% 100%;
					margin-bottom: 12px;

					.resource-detail-right-msg-item {
						p {
							margin-bottom: 12px;
							color: rgba(255, 255, 255, 0.65);
							height: 24px;
							line-height: 24px;
							text-indent: 8px;
							background-image: linear-gradient(to right,
									rgba(216, 228, 236, 0.6),
									transparent);
							border-radius: 4px;
						}

						span {
							font-size: 24px;
							font-weight: bold;
							color: rgba(255, 255, 255, 0.65);
							margin-left: 8px;
						}
					}

					.resource-detail-right-msg-item:nth-child(2) {
						p {
							background-image: linear-gradient(to right,
									rgba(50, 177, 108, 0.6),
									transparent);
						}
					}

					.resource-detail-right-msg-item:nth-child(3) {
						p {
							background-image: linear-gradient(to right,
									rgba(248, 181, 81, 0.6),
									transparent);
						}
					}
				}
			}
		}
	}

	.select {
		position: fixed;
		bottom: 240px;
		right: 420px;
		z-index: 500;
		width: 128px;
		background: rgba(45, 52, 57, 0.85);
		border-radius: 8px;
		padding: 16px 10px;

		.select-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			color: #fff;

			.select-item-left {
				display: flex;
				align-items: center;

				.select-item-left-icon {
					width: 16px;
					height: 4px;
					margin-right: 8px;
					background: rgb(40, 160, 99);
				}
			}
		}

		.select-item:nth-child(2) {
			.select-item-left {
				.select-item-left-icon {
					background: rgb(241, 145, 73);
				}
			}
		}
	}

	.car-case-list {
		height: 380px;
		margin: 16px 0;
		overflow: auto;
	}

	// 作业实况弹窗
	.modal-detail {
		width: 362px;
		height: 926px;
		background: url(../../../../assets/new/new_img_926.png) 0 0 no-repeat;
		background-size: 100% 100%;
	}

	.modal-detail-top {
		width: 160px;
		height: 54px;
		font-size: 16px;
		color: rgba(255, 255, 255, 0.9);
		line-height: 1;
		font-weight: bold;
		background: url(../../../../assets/new/new_light.png) 0 0 no-repeat;
		background-size: 100% 100%;
		display: flex;
		align-items: center;
		margin: 38px 0 0 21px;

		img {
			width: 18px;
			height: 18px;
			margin: 0 10px 0 18px;
		}
	}

	.right-worklist {
		height: 100%;
		font-size: 14px;
		line-height: 1;
		overflow-y: auto;

		.right-work-top {
			display: flex;
			align-items: center;
			justify-content: space-between;
			color: rgba(255, 255, 255, 0.45);
			padding-right: 10px;
			background-image: url(../../../../assets/main/com_bg_max.png);
			background-position: bottom;
			background-repeat: no-repeat;
			background-size: 100% 100px;
			margin-bottom: 10px;
			color: #eee;

			p {
				font-size: 16px;
				color: rgba(255, 255, 255, 0.65);
			}

			span {
				font-size: 24px;
				font-weight: bold;
			}
		}

		.right-work-bottom {
			.right-work-bottom-search {
				width: 310px;
				height: 46px;
				background: url(../../../../assets/new/new_img_search_inp.png) 0 0 no-repeat;
				background-size: 100% 100%;
				display: flex;
				align-items: center;
				margin: 15px 26px 12px 28px;
				padding: 0 15px;
			}

			.right-work-switch {
				color: #fff;
				font-size: 18px;
				font-weight: 500;
				align-items: center;
				margin-bottom: 20px;
				margin-right: 20px;

				span {
					margin: 0 5px;
				}
			}

			.right-work-line {
				text-align: center;
				font-size: 0;

				img {
					width: 282px;
					height: 1px;
				}
			}

			.right-work-bottom-list {
				height: 680px;
				overflow: auto;
			}

			.right-work-bottom-list::-webkit-scrollbar {
				display: none;
			}

			.right-work-bottom-item {
				color: #eee;
				margin: 20px 30px 0 36px;

				::v-deep .ivu-progress-inner {
					border-radius: 0;
					background: transparent;
					border: 1px solid rgba(255, 255, 255, 0.1);
					padding: 3px 2px;

					.ivu-progress-bg {
						border-radius: 0;
					}
				}
			}
		}
	}

	/* 作业实况 详情 */
	.case-detail-cont {
		height: 100%;
		font-size: 14px;
		line-height: 1;
		overflow: auto;

		.case-detail-cont-msg {
			display: flex;
			justify-content: space-between;
			color: #eee;

			// margin-bottom: 10px;
			.case-detail-cont-msg-msg {
				width: 100%;
				height: 78px;
				font-size: 14px;
				color: rgba(255, 255, 255, 0.8);
				font-weight: 500;
				padding: 0 36px;
				display: flex;
				flex-direction: column;
				justify-content: center;

				img {
					width: 44px;
					height: 44px;
					border-radius: 44px;
					margin-right: 10px;
				}
			}

			.case-detail-cont-msg-type {
				text-align: right;
				min-width: 110px;
			}

			.case-detail-cont-msg-icon {
				font-size: 24px;
				margin-right: 16px;
				cursor: pointer;
				color: rgba(255, 255, 255, 0.4);
			}
		}

		.case-detail-cont-list {
			height: 720px;
			overflow-y: auto;

			.list-item {
				height: 84px;
				font-size: 14px;
				color: #00baff;
				padding: 0 36px;
				display: flex;
				flex-direction: column;
				justify-content: center;
				position: relative;

				.list-item-line {
					font-size: 0;
					text-align: center;
					position: absolute;
					top: 0;
					left: 0;

					img {
						width: 282px;
						height: 1px;
					}
				}

				.list-item-car {
					width: 20px;
					height: 20px;
					margin-right: 10px;
				}

				.list-item-img {
					width: 18px;
					height: 18px;
				}

				.title {
					font-size: 14px;
					color: #00baff;
					font-weight: 500;
					line-height: 1;
					position: relative;

					p {
						flex: 1;
						display: flex;
						align-items: center;

						span {
							margin-left: 10px;
						}
					}

					.track {
						position: absolute;
						right: 0;
						top: 0;
						cursor: pointer;
					}
				}

				.cont {
					margin-top: 10px;
					font-size: 16px;
					color: #ffffff;
					opacity: 0.8;

					li {
						font-size: 16px;
						color: #ffffff;

						p:nth-child(1) {}

						p:nth-child(2) {
							margin-right: 5px;
						}
					}
				}
			}

			.list-item:last-child {
				border-bottom: 0;
			}
		}
	}

	// 作业路段
	.section-right {
		width: 362px;
		height: 756px;
		background: url(../../../../assets/new/new_img_756.png) 0 0 no-repeat;
		background-size: 100% 100%;
		position: fixed;
		top: 80px;
		bottom: 10px;
		right: 8px;
		z-index: 500;
		transition: all 0.2s;
		border-radius: 8px;
		overflow: hidden;
		padding-bottom: 10px;

		.section-right-top {
			width: 160px;
			height: 54px;
			font-size: 16px;
			color: rgba(255, 255, 255, 0.9);
			font-weight: bold;
			background: url(../../../../assets/new/new_light.png) 0 0 no-repeat;
			background-size: 100% 100%;
			margin: 38px 0 0 20px;
			display: flex;
			align-items: center;

			.section-right-icon {
				margin: 0 10px;
			}
		}
	}

	.section-cont {
		font-size: 14px;
		color: #ffffff;
		line-height: 1;
		padding: 0 25px 0 36px;

		.tabs {
			display: flex;
			justify-content: space-around;
			margin: 20px 0;

			div {
				height: 24px;
				line-height: 24px;
				border-radius: 12px;
				border: 1px solid rgba(0, 186, 255, 0);
				padding: 0 10px;
			}

			.current {
				background: rgba(0, 186, 255, 0.35);
				border: 1px solid #00baff;
			}
		}

		::v-deep {
			.ivu-input {
				width: 300px;
				height: 36px;
				color: #ffffff;
				background: rgba(0, 0, 0, 0.2);
				border: 1px solid #20739e;
				box-shadow: 0px 0px 49px 2px rgba(51, 102, 255, 0.5);
				opacity: 0.9;
				border-radius: 4px;
				padding: 0 10px;
			}

			.ivu-input-icon {
				color: #ffffff;
				line-height: 36px;
			}
		}

		.tabs::-webkit-scrollbar {
			height: 5px;
		}

		.section-list {
			height: 500px;
			margin-top: 20px;
			overflow-y: auto;

			.list-item {
				height: 85px;
				border-bottom: 1px solid rgba(0, 186, 255, 0.5);
				display: flex;
				align-items: center;
				justify-content: space-between;

				.list-item-div {
					display: flex;
					flex-direction: column;
					justify-content: center;
				}

				.list-item-title {
					line-height: 1.2;
					color: #ffffff;
					opacity: 0.8;

					span {
						margin-left: 10px;
					}
				}

				.list-item-cont {
					font-size: 16px;
					color: #00baff;
					margin-top: 8px;
				}

				.list-item-icon {
					margin-left: 10px;
				}
			}

			.list-item:last-child {
				border: none;
			}
		}
	}

	// 路牌详情
	.guidepost {
		height: 600px;
		overflow-y: auto;
		margin-top: 20px;

		.guidepost-cont {
			font-size: 14px;
		}

		.guidepost-list {
			.list-item:first-child {
				.list-item-lx {
					margin-top: 0px;
				}
			}

			.list-item {
				padding: 0 22px 0 36px;

				.list-item-lx {
					margin-top: 10px;
				}

				.list-item-title {
					font-size: 16px;
					color: #ffffff;
					line-height: 1;

					p {
						/* font-size: 18px; */
						flex: 1;
						margin-left: -10px;

						span {
							font-size: 16px;
							margin-left: 10px;
						}
					}

					.list-item-icon {
						// transition: .5s;
						transform: rotate(90deg);
					}

					.icon-current {
						transform: rotate(-90deg);
					}
				}

				.list-item-cont {
					margin-top: 10px;

					.list-item-cont-msg {
						font-size: 14px;
						color: #ffffff;
						opacity: 0.8;

						p:first-child {
							margin-right: 20px;
						}
					}

					.list-item-cont-resource {
						color: #00baff;
						font-size: 16px;
						line-height: 1;
						margin-top: 20px;
						opacity: 0.8;
					}

					.cont-list {
						.cont-list-item {
							padding-top: 20px;

							.cont-list-item-title {
								font-size: 16;
								color: rgba(255, 255, 255, 0.9);
								line-height: 1;
								padding-left: 15px;
								margin-bottom: 20px;
								position: relative;
							}

							.cont-list-item-title::after {
								content: "";
								position: absolute;
								left: 0;
								top: 50%;
								transform: translate(0, -50%);
								width: 11px;
								height: 11px;
								background: #ffffff;
								border: 1px solid #000000;
								border-radius: 50%;
							}

							.car-list,
							.person-list {
								padding-bottom: 10px;
								border-bottom: 1px solid rgba(0, 186, 255, 0.2);

								.car-list-item,
								.person-list-item {
									margin-top: 10px;
									
									.img{
										width: 42px;
										height: 42px;
									}

									.car-list-item-icon,
									.person-list-item-icon {
										display: inline-block;
										width: 42px;
										height: 42px;
										line-height: 42px;
										text-align: center;
										color: #00baff;
										font-size: 16px;
										background: #999;
										border-radius: 50%;
									}

									.work {
										background-color: #2787aa;
									}

									.no-work {
										background-color: #f59253;
									}

									.car-list-item-cont,
									.person-list-item-cont {
										margin-left: 10px;
										opacity: 0.8;
										color: #ffffff;
										font-size: 16px;
										line-height: 1;
									}
								}

								.person-list-item {
									width: 33.33%;
								}
							}
							.person-list{
								display: flex;
								flex-wrap: wrap;
								.person-list-item{
									width: 50%;
								}
								.person-list-item:nth-child(2n){
									padding-left: 15px;
								}
							}

							.person-list-title {
								font-size: 14px;
								color: #fff;
								opacity: 0.8;
							}
						}
					}
				}
			}
		}
	}

	::v-deep {

		.work,
		.work-detail {
			display: flex;
			justify-content: flex-end;
			/* cursor: pointer; */
		}

		.ivu-progress {
			margin-top: 8px;

			.ivu-progress-inner {
				border: 1px solid rgba(0, 186, 255, 0.6) !important;
				padding: 0 !important;
			}
		}

		.ivu-modal-content {
			box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
			background: rgba(0, 0, 0, 0);
		}

		.ivu-input {
			/* height: 46px; */
			background-color: rgba(0, 0, 0, 0);
			padding: 0;
		}

		.ivu-input:hover {
			border: none;
		}

		.ivu-input:focus {
			box-shadow: 0 0 0 2px rgba(37, 187, 150, 0);
		}

		.ivu-switch-checked {
			border-color: #0d9dff;
			background-color: #0d9dff;
		}
	}
</style>
